/**
 * 发运计划检索
 * @author xiaoxujs
 */

import { DatePicker, Form, Select } from "antd";
import { SearchModuleBox } from "../../style";
import { IPlanPlanPageSearchForm } from "../../../../../type/planManagement";
import { SearchButtonReset, SearchButtonSubmit } from "../../../../../assets/style/Button";
import { FC } from "react";
import { ISelectList } from "../../../../../type/antd";

const { RangePicker } = DatePicker;

const SearchModule:FC<{
    goodsList: ISelectList[]
    transportNameList: ISelectList[]
    handleCallback: (value?: IPlanPlanPageSearchForm) => void;
}> = ({
    goodsList,
    transportNameList,
    handleCallback
}) => {
    const [form] = Form.useForm<IPlanPlanPageSearchForm>();
    const {validateFields, resetFields} = form;
   
    //  查询
    const handleSearch = async () => {
        const values = await validateFields();
        handleCallback(values)
    }
    //  重置
    const handleReset = () => {
        resetFields();
        handleCallback()
    }

    return <SearchModuleBox>
        <div className="search_box">
            <Form
                name="complex-form"
                layout='inline'
                form={form}
            >
                <Form.Item<IPlanPlanPageSearchForm >
                    label='日期'
                    name="date"
                >
                    <RangePicker style={{ width: '26.5rem' }} />
                </Form.Item>
                <Form.Item<IPlanPlanPageSearchForm >
                    label='货品'
                    name='goodsName'
                >
                    <Select style={{ width: '26.5rem' }} options={goodsList} showSearch />
                </Form.Item>
                <Form.Item<IPlanPlanPageSearchForm >
                    label='物流单位'
                    name='transportName'
                >
                    <Select style={{ width: '26.5rem' }} options={transportNameList} showSearch />
                </Form.Item>

                <Form.Item label="" colon={false}>
                    <SearchButtonSubmit style={{ marginRight: '2rem' }} onClick={handleSearch}>
                        <span className="iconfont">&#xe605;</span>
                        查询
                    </SearchButtonSubmit>
                    <SearchButtonReset onClick={handleReset}>
                        <span className="iconfont">&#xe67d;</span>
                        重置
                    </SearchButtonReset>
                </Form.Item>
            </Form>
        </div>

    </SearchModuleBox>
}

export default SearchModule;